<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入css重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入bootstrap样式文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <!-- 引入less样式文件 -->
    <link rel="stylesheet/less" href="./css/style.less">
    <!-- 引入wow.js样式文件 -->
    <link rel="stylesheet" href="./css/animate.min.css">
</head>
<body>
    <!-- 导航 -->
    <div class="header">
        <div class="container head">
            <div class="row">
                <nav class="navbar navbar-default " role="navigation">
                    <div class="container-fluid"> 
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand logo wow fadeInLeft" href="#">Spirit8</a>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active wow fadeInDown"><a href="#">HOME</a></li>
                            <li class="wow fadeInDown"><a href="#">About</a></li>
                            <li class="wow fadeInDown"><a href="#">SERVICES</a></li>
                            <li class="wow fadeInDown"><a href="#">portfolio</a></li>
                            <li class="wow fadeInDown"><a href="#">testimonials</a></li>
                            <li class="wow fadeInDown"><a href="#">CONTACT</a></li> 
                        </ul>
                    </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="banner">
        <div class="banner_MP4">
            <video autoplay muted width="100%" loop>
                <source src="./img/banner.mp4" />
            </video>
        </div>
        <!-- <div class="banner_title">
            <span>wELCOME on</span>
            <span>spirit8</span>
        </div>
        <div class="banner_font">We are a digital agency with years of experience and with extraordinary people</div>
        <div class="banner_border wow shake">↓</div> -->
    </div>
    

    <!-- 内容 -->
    <div class="main">
        <div class="container head">
            <div class="row">
                <div class="col-lg-6">
                    <div class="main_left wow fadeInLeft">
                        <img src="./img/img.png" alt="">
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="main_right">
                        <div class="main_font wow fadeInDown">
                            <p>About us</p>
                        </div>
                        <div class="main_title wow fadeInDown">
                            <span>Some</span>
                            <span>words</span>
                            <span>about us</span>
                        </div>
                        <div class="main_center wow fadeInDown">
                            <p>We love building and rebuilding brands through our</p>
                            <p>specific skills. Using colour, fonts, and illustration, we</p>
                            <p>brand companies in a way they will never forget.</p>
                        </div>
                        <div class="main_list wow fadeInDown">
                            <ul>
                                <li>Mission - We deliver uniqueness and quality</li>
                                <li>Skills - Delivering fast and excellent results</li>
                                <li>Clients - Satisfied clients thanks to our experience</li>
                            </ul>
                        </div>
                        <div class="main_btn wow fadeInDown">
                            <span class="glyphicon glyphicon-lock"></span>
                            <span>Browse our work</span>
                        </div>
                    </div>
                </div>
            </div>    
        </div>
    </div>

    <div class="menu">
        <div class="container head">
            <div class="row">
                    <div class="col-lg-3 col-xs-6 col-sm-6">
                        <div class="menu_center"></div>
                        <p>123</p>
                    </div>
                    <div class="col-lg-3 col-xs-6 col-sm-6">
                        <div class="menu_center"></div>
                        <p>123</p>
                    </div>
                    <div class="col-lg-3 col-xs-6 col-sm-6">
                        <div class="menu_center"></div>
                        <p>123</p>
                    </div>
                    <div class="col-lg-3 col-xs-6 col-sm-6">
                        <div class="menu_center"></div>
                        <p>123</p>
                    </div>
            </div>
        </div>
    </div>

    <div class="box">
        <div>
            <div class="box1"></div>
            <div class="box2">
            123
            </div>
        </div>
    </div>
    
    
</body>
<!-- 引入less文件 -->
<script src="./js/less.js"></script>
<!-- 引入jq文件 -->
<script src="./js/jQuery.js"></script>
<!-- 引入bootstrap JavaScript文件 -->
<script src="./js/bootstrap.min.js"></script>
<!-- 引入wow.js脚本文件 -->
<script src="./js/wow.min.js"></script>
<script>
    // 修改视频的播放速度
    document.querySelector('video').defaultPlaybackRate = 8.0;
    document.querySelector('video').play();
    document.querySelector('video').playbackRate = 8.0;

    // 初始化
    new WOW().init();
</script>
</html>